<template>
  <div class="wrapper" id="wrapper">
    <div v-if="show">
      <v-head ref="header" ></v-head>
      <!-- <v-headRouter :items="items"  @listItem="listItem"></v-headRouter> -->
      <v-sidebar :items="listitmes" v-if="!headBanner"></v-sidebar>
      <div class="crumb-wrapper" :class="{'content-collapse': collapse}">
        <el-breadcrumb separator="/" v-if="!headBanner && ['inspur-design', 'dark'].includes($store.state.globalTheme)">
          <el-breadcrumb-item v-for="item in _route" :key="item.path">{{item.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content-box" :class="{'content-collapse': collapse,'headBanner':headBanner}">
        <!-- <v-tags></v-tags> -->
        <div class="content-outer">
          <div class="content" id="content">
            <el-breadcrumb separator="/" v-if="!headBanner && ['ele'].includes($store.state.globalTheme)">
              <el-breadcrumb-item v-for="item in _route" :key="item.path">{{item.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
            <transition :name="transitionName" mode="out-in">
              <keep-alive :include="keepAliveList">
                <router-view></router-view>
              </keep-alive>
            </transition>
            <el-backtop target=".content"></el-backtop>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-layout">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import vHead from './Header.vue';
import vHeadRouter from './HeaderRouter.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import bus from './bus';
import $ from 'jquery'
import items from '@/config/siderbarItem.js'
import cookie from 'cookie'
import '@/assets/scss/ele.scss' // 默认主题（浅蓝主题）
import '@/assets/scss/inspur-design.scss' // 深蓝主题
import '@/assets/scss/dark.scss' // 黑色主题
// import '@/assets/scss/kus.scss' // 绿色主题
// import '@/assets/scss/orange.scss' // 橙色主题
// import '@/assets/scss/red.scss' // 红色主题
import '@/assets/scss/theme-other.scss'
import '@/assets/scss/element-extends.scss' // element-ui样式修补
import '@/assets/scss/typical.scss' // 典型页面

export default {
  data() {
    return {
      show: true,
      headBanner:false,
      tagsList: [],
      collapse: false,
      generalBreadCrumb: true,
      isInpsurDesign: generalConfig.isInpsurDesign,
      transitionName: 'move',
      // 此处配置要缓存的页面的name
      keepAliveList: ['keep-alive-page'],
      change:false,
      items:"",
      listitmes:''
    }
  },
  components: {
    vHead,
    vTags,
    vSidebar,
    vHeadRouter
  },
  computed: {
    _route() {
      return this.$route.matched
    }
  },
  created() {
    this.items =JSON.parse(JSON.stringify(items)) ;
    this.listitmes = items;
    bus.$on('collapse', msg => {
      this.collapse = msg;
    })
    bus.$on('tags', msg => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      this.tagsList = arr;
    })
    this.handleShow()
    $('#body')[0].className = this.$store.state.globalTheme
  },
  methods: {
    handleShow() {
      generalConfig.hasLayout === undefined ? this.show = true : this.show = generalConfig.hasLayout;
      generalConfig.hasTopLayout === undefined ? this.headBanner = true : this.headBanner = generalConfig.hasTopLayout;
      generalConfig.hasToggleAnimation === undefined ? this.transitionName = 'move' : generalConfig.hasToggleAnimation ? this.transitionName = 'move' : this.transitionName = '';
    },
    listItem(value){
      this.listitmes = value
    }
  }
}
</script>
<style scoped>
.content-outer {
  margin: 10px;
  background-color: transparent;
  overflow-y: auto;
  height: 100%;
}
.content {
  min-width: 600px;
  padding: 15px;
  overflow-y: auto;
}
</style>
// 全局样式，所有的滚动条都用此样式
<style>
::-webkit-scrollbar {
  width: 8px;
  /* 纵向滚动条宽度 */
  height: 6px;
  /*横向滚动条宽度*/
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  /* 滚动条圆角 */
  background-color: rgb(194, 194, 194);
}
</style>
<style lang="scss">
/* 全局UI组件库样式 */
.UIL-container {
  padding: 50px 8%;
  background-color: #fff;
  h1 {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  h2 {
    font-weight: normal;
    margin-top: 40px;
    margin-bottom: 14px;
  }
  p {
    line-height: 24px;
  }
}
.margin-b {
  margin-bottom: 10px;
}
.wrapper {
  background-color: #f2f2f2;
}
.no-layout {
  padding: 20px;
}
</style>
<style lang="scss" scoped>
.el-breadcrumb {
  margin-bottom: 20px;
  font-size: 15px;
  color: #666666;
}
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}
.breadcrumb-leave-active {
  position: absolute;
}
@media (max-width: 1400px) {
  .el-breadcrumb {
    margin-bottom: 15px;
  }
}
</style>